import React from 'react'
import {Button, Label, Menu, Table} from 'semantic-ui-react'

const TableExamplePagination = (props) => {
    const {requestDetails, investorCount, onFinalizeClick, onApproveClick, pageKey} = props;

    //注意，调用时不是函数，不加（）
    let finalCellRow = requestDetails.map((requestDetail, index) => {
        return <CellRow key={index}
                        requestDetail={requestDetail}
                        investorCount={investorCount}
                        index={index}
                        onFinalizeClick={onFinalizeClick}
                        onApproveClick={onApproveClick}
                        pageKey={pageKey}
        />
    });

    return (
        <Table celled>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell>花费描述</Table.HeaderCell>
                    <Table.HeaderCell>花费金额</Table.HeaderCell>
                    <Table.HeaderCell>商家地址</Table.HeaderCell>
                    <Table.HeaderCell>当前赞成人数</Table.HeaderCell>
                    <Table.HeaderCell>当前状态</Table.HeaderCell>
                    <Table.HeaderCell>操作</Table.HeaderCell>
                </Table.Row>
            </Table.Header>
            <Table.Body>
                {
                    finalCellRow
                }
            </Table.Body>
        </Table>
    )
}

const CellRow = (props) => {

    const {requestDetail, investorCount, index, onFinalizeClick, onApproveClick, pageKey} = props;
    const {0: purpose, 1: cost, 2: shopAddress, 3: isVoted, 4: voteCount, 5: status} = requestDetail;
    let showStatus = '';
    let isCompleted = false;

    if (status == 2) {
        isCompleted = true;
        showStatus = '已完成!';
    } else if (voteCount * 2 < investorCount) {
        showStatus = '投票中...';
    } else {
        //待解决，传递一个investor总量过来
        showStatus = '已批准!';
    }

    return (
        <Table.Row>
            <Table.Cell>{purpose}</Table.Cell>
            <Table.Cell>{cost}</Table.Cell>
            <Table.Cell>{shopAddress}</Table.Cell>
            <Table.Cell>{voteCount}</Table.Cell>
            <Table.Cell>{showStatus}</Table.Cell>
            <Table.Cell>
                {
                    (pageKey == 2) ? (
                        <Button disabled={voteCount * 2 < investorCount ||isCompleted} onClick={() => onFinalizeClick(index)}>支付</Button>
                    ) : (
                        <Button disabled={isVoted || isCompleted} onClick={() => onApproveClick(index)}>批准</Button>
                    )
                }
            </Table.Cell>
        </Table.Row>
    )
}

export default TableExamplePagination
